import React, {useState} from 'react';
import jsonData from '../../axios/Community.json'

export default function Community() {
    const CommunityList = jsonData

    function Module(item) { // 遍历CommunityList.data的list列表
        const [zoomed, setZoomed] = useState(false);
        return (//决定图片是否放大
            <div className="col mb-4">
                <div className="card"
                     style={{position: 'relative', overflow: 'hidden', cursor: zoomed ? 'zoom-out' : 'zoom-in'}}
                     onMouseOver={() => setZoomed(true)} onMouseOut={() => setZoomed(false)}>
                    <img src={item.item.img} className="card-img-top" alt="..." style={{
                        transform: zoomed ? 'scale(1.7)' : 'scale(1)', transition: 'transform 1s', cursor: "pointer"
                    }}/>
                    <div className="card-body">
                        <h5 className="card-title">
                            <p><small className="text-muted">{item.item.title} 主题:3000</small></p>
                            <small className="text-muted">版主:{item.item.titleUser} 简介:{item.item.titleBlurb}</small>
                        </h5>
                    </div>
                </div>
            </div>
        )
    }

    return (<div> {CommunityList.data.map(item => {//第一层遍历
        return <div><h1 className='text-body'>板块:{item.titleTheme}</h1>
            <div className="row row-cols-1 row-cols-md-2">
                {item.list.map(item => {// 第二层遍历
                    return <div className="col" style={{padding: "0"}}><a href="/Article"
                                                                          className="list-group-item list-group-item-action">
                        <Module item={item}/>
                    </a></div>
                })}
            </div>
        </div>
    })} </div>)

}


